`<template>
  <div>
    <!-- 上 -->
    <div
      class="header_div"
    >
          <el-card style="width: 200px; height: 80px" shadow="always">
            <div
              class="color"
              style="background-color: #5fb2ff; width: 25px; height: 25px"
            />
            终端数量：{{ allData.terminalNum }}
          </el-card>
          <el-card style="width: 200px; height: 80px" shadow="always">
            <div
              class="color"
              style="background-color: #ff7573; width: 25px; height: 25px"
            />
            APK总量：{{ allData.apkNum }}
          </el-card>
          <el-card style="width: 200px; height: 80px" shadow="always">
            <div
              class="color"
              style="background-color: #4dcdcd; width: 25px; height: 25px"
            />
            风险总量：{{ allData.riskNum }}
          </el-card>
          <el-card style="width: 200px; height: 80px" shadow="always">
            <div
              class="color"
              style="background-color: #cfcfcf; width: 25px; height: 25px"
            />
            今日新增APP：{{ allData.appAddNum }}
          </el-card>
          <el-card style="width: 200px; height: 80px" shadow="always">
            <div
              class="color"
              style="background-color: #ffbf67; width: 25px; height: 25px"
            />
            今日新增终端：{{ allData.terminalAddNum }}
          </el-card>
    </div>
    <el-divider />
    <!-- 中 -->
    <div style="">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>每日监测库增量</span>
              </div>
            </template>
            <linechart />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>各类风险占比</span>
              </div>
            </template>
            <ring_chart3 />
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 下 -->
    <div style="margin-top: 10px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>APK排行榜</span>
              </div>
            </template>
            <div class="scroll-wrap">
              <div class="scroll-header">
                <ul class="scroll-ul">
                  <li class="scroll-li">
                    <span style="width: 500px">风险内容</span>
                    <span style="width: 180px">风险数量</span>
                  </li>
                </ul>
              </div>
              <div class="scroll-content">
                  <ul
                    class="scroll-ul"
                    v-for="(item, index) in listData2"
                    :key="index"
                  >
                    <li class="scroll-li">
                     
                      <span
                        class="name"
                        v-text="item.name"
                        style="width: 500px"
                      ></span>
                      <span
                        class="risk"
                        v-text="item.value"
                        style="width: 180px"
                      ></span>
                    </li>
                  </ul>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>风险排行榜</span>
              </div>
            </template>
            <div class="scroll-wrap">
              <div class="scroll-header">
                <ul class="scroll-ul">
                  <li class="scroll-li">
                    <span style="width: 300px">手机号</span>
                    <span style="width: 500px">风险名称</span>
                    <span style="width: 100px">风险数量</span>
                  </li>
                </ul>
              </div>
              <div class="scroll-content">
                <vue-seamless-scroll :data="listData1" class="warp">
                  <ul
                    class="scroll-ul"
                    v-for="(item, index) in listData1"
                    :key="index"
                  >
                    <li class="scroll-li">
                      <span
                        class="number"
                        v-text="item.phoneNum"
                        style="width: 300px"
                      >
                      </span>
                      <span
                        class="name"
                        v-text="item.phoneName"
                        style="width: 500px"
                      ></span>
                      <span
                        class="risk"
                        v-text="item.count"
                        style="width: 100px"
                      ></span>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import linechart from "./linechart.vue";
import ring_chart3 from "./ring_chart3.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import {
  getAll,
  terminalRiskRank,
  apkRiskRank,
} from "@/api/applicationService/data";

export default {
  components: { linechart, ring_chart3, vueSeamlessScroll },
  data() {
    return {
      listData1: [],
      listData2: [],
      allData: {},
    };
  },

  mounted() {
    this.initData();
    this.initLeftBtm();
    this.initapkRiskRank();
  },
  methods: {
    initData() {
      getAll().then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.allData = res.data;
        }
      });
    },
    initLeftBtm() {
      terminalRiskRank().then((res) => {
        if (res.code == "200") {
          this.listData1 = res.data;
        }
      });
    },
    initapkRiskRank() {
      apkRiskRank().then((res) => {
        if (res.code == "200") {
          let dddddd = [];
          res.data.map((item) => {
            if(item.name!=='其他'){
              dddddd.push(item);
            }
          });
          this.listData2 = dddddd;

        }
      });
    },
  },
};
</script>
<style scoped>
.header_div {
  display: flex;
    height: 80px;
    line-height: 80px;
    background-color: rgb(255, 255, 255);
    flex-direction: row;
    flex-wrap: nowrap;
    /* align-content: center; */
    justify-content: space-between;
    align-items: center;
}

.grid-content1 {
  display: inline-block;
}

.color {
  display: inline-block;
  position: relative;
  top: 3px;
  right: 6px;
}

h2 {
  color: #000000;
  font-weight: bold;
}

.el-table::before {
  background-color: transparent;
}

.hasTagsView .app-main {
  background-color: #000;
}

.warp {
  height: 270px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;

    li,
    a {
      display: block;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
  }
}

.scroll-wrap {
  width: 80%;
  height: 295px;
  overflow: hidden;
  margin-left: 5%;
  margin-top: 5px;
}

.scroll-header,
.scroll-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-list {
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.scroll-ul {
  padding-inline-start: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0px !important;
}

.scroll-li {
  width: 100%;
  display: flex;
  line-height: 35px;
}

.scroll-li > span {
  display: flex;
  height: 35px;
  line-height: 35px;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  padding-left: 5px;
  overflow: hidden;
}

.scroll-li > span:last-child {
  border-right: 1px solid #dcdfe6;
}

.scroll-header .scroll-li {
  background-color: #f8f9ff;
}

.scroll-header .scroll-li > span {
  font-weight: bold;
  border-top: none;
}

.scroll-content .scroll-ul:last-child .scroll-li {
  border-bottom: 1px solid #dcdfe6;
}
::v-deep .el-card__body {
  padding: 0px;
  text-align: center;
  border-radius: 10px;
}
</style>
